import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import '../../config/kq_global.dart';
import '../../resources/kq_images.dart';
import '../../resources/kq_theme_colors.dart';
import '../divider/kq_divider.dart';
import '../formItem/entity/kq_form_entity.dart';

class KqSpecialView extends StatefulWidget {
  const KqSpecialView(
      {super.key,
      required this.data,
      this.minWidth = 60,
      this.maxWidth = 90,
      this.height,
      this.onTap});
  final KqFormEntity data; //extraData:[{'title':'','tit   leId':''}]
  final double minWidth;
  final double maxWidth;
  final double? height;
  final Function? onTap;
  @override
  State<KqSpecialView> createState() => _KqSpecialViewState();
}

class _KqSpecialViewState extends State<KqSpecialView> {
  double top = 4.r;
  double autoheight = (TextPainter(
          maxLines: 1,
          textDirection: TextDirection.ltr,
          text: TextSpan(text: '高度', style: TextStyle(fontSize: 14.sp)))
        ..layout(
          maxWidth: double.infinity,
        ))
      .size
      .height;
  //左侧的必填
  Widget renderStarView() {
    var star = widget.data.mustInput && widget.data.editable ? '*' : '';
    return SizedBox(
      width: 16.r,
      child: Text(
        star,
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.red, fontSize: 14.sp),
      ),
    );
  }

  //title
  Widget renderTitleView() {
    return LimitedBox(
      maxWidth: 104.r,
      child: Text(
        widget.data.title,
        maxLines: 1,
        style: TextStyle(color: KqThemeColors.text333, fontSize: 14.sp),
      ),
    );
  }

//计算宽度
  Size handleTxtWidth(String txt) {
    TextPainter painter = TextPainter(
        locale: Localizations.localeOf(context),
        maxLines: 1,
        textDirection: TextDirection.ltr,
        text: TextSpan(text: txt, style: TextStyle(fontSize: 14.sp)))
      ..layout(
        maxWidth: double.infinity,
      );
    return painter.size;
  }

  Widget renderTags(Map item, int index) {
    Size size = handleTxtWidth(item['title']);
    double left = 4.r;
    double width = size.width + left * 2;
    return Container(
      width: width > widget.maxWidth
          ? widget.maxWidth
          : width < widget.minWidth
              ? widget.minWidth
              : width,
      height: widget.height != null && widget.height! > 0
          ? widget.height
          : autoheight + top * 2,
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(vertical: top, horizontal: left),
      decoration: BoxDecoration(
        color: KqThemeColors.bgF4,
        borderRadius: BorderRadius.all(Radius.circular(2.r)),
      ),
      child: InkWell(
        onTap: () {
          setState(() {
            if (widget.data.extraData != null &&
                widget.data.extraData.length > index) {
              widget.data.extraData.removeAt(index);
            }
          });
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
                child: Text(
              item['title'],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 14.sp, color: KqThemeColors.text333),
            )),
            Icon(
              Icons.clear,
              size: 16.r,
              color: KqThemeColors.text666,
            )
          ],
        ),
      ),
    );
  }

  List<Widget> renderList() {
    List<Widget> views = [];
    if (widget.data.extraData != null) {
      for (var i = 0; i < widget.data.extraData.length; i++) {
        Map item = widget.data.extraData[i];
        views.add(renderTags(item, i));
      }
    }
    return views;
  }

//允许编辑的状态下
  Widget renderWrap() {
    return Wrap(
      alignment: WrapAlignment.end,
      spacing: 4,
      runSpacing: 4,
      children: renderList(),
    );
  }

//显示详情
  Widget renderDetail() {
    return Text(
      widget.data.valueForShow ?? '',
      textAlign: TextAlign.right,
      style: TextStyle(fontSize: 14.sp, color: KqThemeColors.text666),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          Row(
            children: [
              renderStarView(),
              renderTitleView(),
              Expanded(
                child: Container(
                  padding:
                      EdgeInsets.symmetric(vertical: 10.r, horizontal: 8.r),
                  color: Colors.white,
                  child: widget.data.editable ? renderWrap() : renderDetail(),
                ),
              ),
              Visibility(
                  visible: widget.data.editable,
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        //假数据
                        if (widget.data.extraData != null &&
                            widget.data.extraData.length < 2) {
                          widget.data.extraData.add({'title': '的你姐夫的你姐夫'});
                        } else if (widget.data.extraData != null &&
                            widget.data.extraData.length > 1) {
                          widget.data.extraData.add({'title': '不超过'});
                        } else {
                          widget.data.extraData = [
                            {'title': 'df'}
                          ];
                        }
                      });
                      if (widget.onTap != null) {
                        widget.onTap!();
                      }
                    },
                    child: Container(
                      color: Colors.white,
                      padding: EdgeInsets.all(11.r),
                      child: Image.asset(
                        KqImages.commonIcChoice16Sel,
                        height: 20.r,
                        width: 20.r,
                        package: KqGlobal.packageName,
                      ),
                    ),
                  ))
            ],
          ),
          const KqDivider()
        ],
      ),
    );
  }
}
